<template lang="pug">
  .feedfack
    .toolbar
      .breadcrumbs 意见反馈管理
    table.table
      thead
        tr
          th(v-for="(item,index) in titles" :key="index") {{item}}
      tbody
        tr(v-for="(item,index) in list" :key="index")
          td {{item.createTime}}
          td {{item.contactWay}}
          td {{item.organizationCode}}
          td {{item.organizationName}}
          td {{item.description}}

    .m-pagination
      a(href="javascript:;" @click="gotopage(1)") 首页
      a(href="javascript:;" @click="gotopage(pageNow-1)") <
      a(v-for="(item,index) in pagecount" :key="index" @click="gotopage(item)" :class="{active:index+1==pageNow}" v-show="item-pageNow>=-2&&item-pageNow<3") {{index+1}}
      a(href="javascript:;" @click="gotopage(pageNow+1)") >
      a(href="javascript:;"  @click="gotopage(pagecount.length)") 末页
</template>
<<script>
let titles = '填写时间 联系方式 单位码 单位名称 反馈内容'.split(' ')
  export default {
    name:"feedfack",
    data(){
      return{
        titles,
        pageNow:1,
        pageSize:10,
        list:[],
        total:0,
        pagecount:0
      }
    },
    mounted(){
      this.querylist()
    },
    methods:{
      async querylist(){
        let res = await this.$ajax.get(`xyssoManager/feedback/queryAll?pageNow=${this.pageNow}&pageSize=${this.pageSize}`)
        let data = res.data
        if(data.code==200){
          this.list = data.data
          this.total = data.size
          this.pagecount = []
          if (data.pageCount === null) {
            this.pagecount = 1
          } else {
            for(let i=1;i<parseInt(data.pageCount)+1;i++){
              this.pagecount.push(i)
            }
          }
        }
      },
      gotopage(item){
        if(item > this.pagecount) return
        if(item < 1) return
        this.pageNow = item
        this.querylist()
      },
    }
  }
</script>
<<style lang="stylus" scoped>
.feedfack
  background #ffffff
  margin 0 auto
  .toolbar
    width 100%
    height 70px
    line-height 70px
    background #fff
    border-bottom 1px solid #e0e0e0
    .breadcrumbs
      float left
      margin-left 30px
      font-size 18px
  >.table
    width 100%
    background #fff
    border-spacing 0
    padding 22px 30px 0 30px
    >thead
      >tr
        height 40px
        border-bottom 5px solid #f0f5fb
        color #999999
        font-size 12px
        >th
          line-height 40px
          font-size 12px
          color #999
          text-align center
          background #f5f5f5
          &:nth-child(1)
            width 14%
          &:nth-child(2)
            width 17%
          &:nth-child(3)
            width 17%
          &:nth-child(4)
            width 17%
          &:nth-child(5)
            width 25%
            text-align left
            padding-left 10px
    >tbody
      color #686868
      font-size 14px
      >tr
        border 1px solid #eeeeee
        >td
          min-height 52px
          padding 17px 10px
          text-align center
          border-bottom 1px solid #eee
          &:nth-child(5)
            text-align left
            padding-right 10px

  .m-pagination
    float right
    font-size 0
    margin-top 20px
    a
      text-decoration  none
      display inline-block
      width 32px
      height 32px
      border-radius 5px
      text-align center
      line-height 32px
      margin-right 10px
      font-size 12px
      color #999
      background #fff
      &.active
      &:hover
        background #e75a46
        color #fff
      &:first-of-type
      &:last-of-type
        width 52px
</style>

